<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改计划</title>
    <link rel="stylesheet" href="../js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <style>
        #whole {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center; /*实现水平居中*/
            align-items: center; /*实现垂直居中*/
            top: 50%;
            left: 50%;
            position: absolute;
            margin: -250px 0 0 -250px;
            background: black;
        }

        body {
            background: black;
        }
    </style>
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui-2.13.0/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="whole">
    <div>
        <el-link href="schedules.html">回到计划首页<i class="el-icon-view el-icon--right"></i> </el-link>
        <br>
        <el-select style="width: 400px" v-model="schedule.scheduleType" placeholder="请选择计划类型" clearable>
            <el-option
                    v-for="item in schedulesTypes"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <br><br>
        <el-input style="width: 400px" class="box" placeholder="请输入计划内容" v-model="schedule.scheduleContent"
                  maxlength="30"
                  clearable>
            <template slot="prepend">计划内容</template>
        </el-input>
        <br><br>
        <el-date-picker
                style="width: 400px"
                v-model="schedule.startDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期">
        </el-date-picker>
        <br><br>
        <el-time-select
                v-model="schedule.scheduleStartTime"
                :picker-options="{
                    start: '07:30',
                    step: '00:10',
                    end: '24:00'
                }"
                style="width: 400px"
                @change="getScheduleStartTime"
                placeholder="选择计划开始时间">
        </el-time-select>
        <br><br>
        <el-input style="width: 400px"
                  class="box"
                  placeholder="请输入所需时间(单位：分钟)"
                  v-model="schedule.minuteTime"
                  maxlength="30"
                  clearable>
            <template slot="prepend">所需时间</template>
        </el-input>
        <br><br>
        <el-button style="width: 400px" class="box" type="primary" @click="submit">提交</el-button>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: '#whole',
        data: {
            schedule: {},
            schedulesTypes: []
        },
        created() {
            // 对cookie操作
            var cookies = document.cookie;
            var cookie_array = cookies.split(";");
            for (var i = 0; i < cookie_array.length; i++) {
                var cookie = cookie_array[i];
                var array = cookie.split("=");
                if (array[0] == " username") {
                    this.schedule.username = array[1];
                }
            }
        },
        methods: {
            getScheduleStartTime() {
                this.schedule.scheduleStartTime = this.schedule.startDate + " " + this.schedule.scheduleStartTime + ":00";
            },
            queryScheduleType() {
                axios.post('https://3723r72n06.picp.vip/mylife/schedule/queryScheduleType', "", {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    response.data.forEach(item => {
                        let arr = {
                            value: item,
                            label: item
                        };
                        this.schedulesTypes.push(arr);
                    });
                });
            },
            queryOneSchedule() {
                axios.post('https://3723r72n06.picp.vip/mylife/schedule/queryOneSchedule', this.schedule, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    this.schedule = response.data;
                    this.schedule.scheduleStartTime = this.schedule.startDate + " " + this.schedule.scheduleStartTime;
                });
            },
            submit() {
                this.schedule.id = localStorage.getItem("id");
                axios.post('https://3723r72n06.picp.vip/mylife/schedule/updateSchedule', this.schedule, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    if (response.data.code == 200) {
                        this.$message.success(response.data.msg);
                        setTimeout(() => {
                            location.href = "querySchedules.html";
                        }, 1000);
                    } else if (response.data.code == 1011) {
                        this.$message.warning(response.data.msg);
                    }
                });
            },
        },
        mounted() {
            this.queryScheduleType();
            this.schedule.id = localStorage.getItem("id");
            this.queryOneSchedule();
        }
    });
</script>
</html>